"use client";
import React, { useState } from 'react';
import PageContainer from '../components/PageContainer';
import Divider from '../divider/components/Divider';

import FloatButton from './components/FloatButton';
import Button from '../button/components/Button';
import FLexRow from '../flex/components/FlexRow';
import Cell from '../flex/components/Cell';
import { FaFileAlt } from "react-icons/fa";


const Page = () => {
    const [isDemo1Visible, setDemo1IsVisible] = useState(false);
    return (
        <PageContainer>
            <h1 className='font-douyin'>通用·Button</h1>
            <h2 className='font-douyin text-5xl'>按钮</h2>
            <p>用户使用按钮来触发一个操作或者进行跳转。</p>
            <Divider />
            <h3 className='text-3xl'>代码演示</h3>
            <h4 className='text-2xl'>基本用法</h4>

            <Cell>
                <FLexRow className=''>
                    <Button onClick={() => setDemo1IsVisible(true)}>显示悬浮按钮</Button>
                    <Button onClick={() => setDemo1IsVisible(false)}>隐藏悬浮按钮</Button>
                </FLexRow>
                {isDemo1Visible && <FloatButton position='right-5 bottom-20'>悬浮按钮</FloatButton>}
                {isDemo1Visible && <FloatButton icon={<FaFileAlt />} position='right-5 bottom-40'></FloatButton>}
                {isDemo1Visible && <FloatButton shape='circle' icon={<FaFileAlt />} position='right-5 bottom-60'></FloatButton>}

                {/* <FloatButton icon={<FaFileAlt />}>悬浮按钮66666666666666662222</FloatButton>
                <FloatButton position='right-0 top-1/5' icon={<FaFileAlt />}></FloatButton>
                <FloatButton shape='circle' position='right-0 top-2/5' icon={<FaFileAlt />}></FloatButton>
                <FloatButton theme='solid' type='secondary' shape='circle' position='right-0 top-2/5' icon={<FaFileAlt />}></FloatButton> */}

            </Cell>
        </PageContainer>
    );
};

export default Page;
